<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>

      <div id="container">
            hello world
            <span>hello world</span>
            <span>hello world</span>
            <span>hello world</span>
      </div>
      <button class="btn">你好</button>
      <script src="./jquery.js"></script>
      <script>
            // 增删改查;

            // 1. 增 :  原生API : document.createElement("");
            // 1.1 目标 : 创建一个带有 box 类名的div;
            // var div = document.createElement("div");
            // div.className = "box";

            // jQuery的写法;
            var $box = $("<div class='box'>你好世界</div>");
            // console.log($box[0]);
            // 怎么把元素放入页面之中;
            // 方便元素的插入 API
            // 1. 后增;    append();
            // 2. 前增;    prepend();
            // 3. 兄弟后增; after();
            // 4. 兄弟前增; before();

            // $("#container").append($box);
            // $("#container").prepend($box);
            // $("#container").after($box);

            // 除了 append 之外为了用户语法通顺, 会让语法存在两种情况1. 把字句 2. 被字句;
      
            // appendTo  把字句;
            // $box.appendTo($("#container"));

            // 克隆 :   cloneNode;
            // clone() : 克隆了事件;

            // $(".btn").click(function(){
            //       var $clone_btn = $(this).clone(true);
            //       $("body").append($clone_btn);
            // })

            // 删 : 

            // $(".btn").remove();
            
            // 改 : 
            // 1. 改外包;
            // 2. 改内容;
            
            // $("#container").wrap("<a href='https://www.baidu.com'></a>");
            // $("#container").wrap("<div class='wrap'></div>");
            // $("#container").wrapInner("<div class='wrap'></div>");
            // $("#container").unwrap();

            // 改内容 : 
            // innerHTML 
            // innerText
            // value;  => val
            // $("#container").html("<strong>你好世界</strong>");
            // $("#container").text("<strong>你好世界</strong>");
            
            // 取值;
            // console.log($("#container").html());
            // console.log($("#container").text());

            // innerHTML += "xxx" 向后拼接;
            // $("#container").append("你好世界");

            // 查 : 1. 选择器;
            // 2. 家族关系遍历;
            // 父子兄弟;
            

      </script>
</body>
</html>